<template>
	<tm-fullView>
		<tm-menubars title="Card卡片" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>

		<tm-card
			subTitle="完整卡片"
			title="这是一个完整的属性示例,详见文档"
			subText="这是一段介绍,见文档"
			:content="text"
			:action="['确认', '删除']"
			:btnColor="['primary', 'red']"
			statusText="当前未领取"
			statusColor="red"
		></tm-card>
		<tm-card img="https://picsum.photos/300" :imgRound="24" :actionBorder="false" title="简单示例" content="内容" subTitle="2022-1-1 12:00:00" statusText="正常"></tm-card>
		<tm-card title="简单示例" content="内容" :action="['操作按钮']"></tm-card>
		<tm-card content="只有内容和按钮的卡片" :titleBorder="false" :action="['操作按钮']">
			<template v-slot:content="{ text }">
				<view>
					<tm-images :height="150" :width="640" src="https://picsum.photos/300"></tm-images>
					<view class="py-24">自定义插槽内容，可以根据插槽名称来定义各个部分，详见文档。</view>
				</view>
			</template>
		</tm-card>
		<view style="height: 100rpx;"></view>
	</tm-fullView>
</template>

<script>
import tmCard from '@/tm-vuetify/components/tm-card/tm-card.vue';
import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
import tmFullView from '@/tm-vuetify/components/tm-fullView/tm-fullView.vue';
import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
export default {
	components: { tmCard, tmMenubars, tmFullView, tmImages },
	data() {
		return {
			text:
				'路透社援引消息人士的话称，立陶宛外长兰茨贝尔吉斯最近向总统瑙塞达提议，将台驻立陶宛机构中文名称中的“台湾”改为“台湾人民”，想以此缓和与中国的紧张关系。这已经不是立陶宛方面第一次就更名问题放出风声，此前'
		};
	},
	mounted() {}
};
</script>

<style lang="scss"></style>
